<template>
  <view>
    <view class="itemwrap"
      style="display: flex;justify-content: space-between;margin-top: 20upx;border-bottom: 1px solid #F5F6FA;padding-bottom: 20upx;"
      v-if="fieldData.display" :class="{ 'form-detail': pageFormType === 'detail','disabled-field':fieldData.disabled===true }">
      <view class="title " style="display: flex;" :class="!valid.valid ? 'valid_error' : ''">
        <text class="text-black" :for="fieldData.column"> <text class="text-red text-shadow"
            v-show="fieldData.isRequire">*</text>{{ fieldData.label }}:</text>
        <text v-show="!valid.valid">({{ valid.msg }})</text>
        <view class="info text-orange" v-if="valid.info&&valid.info!==true">
          {{valid.info}}
        </view>
        <!-- <view v-if="fieldData._colDatas.more_config" style="width: 50px;">
					<button class="confirm-btn bg-blue text-green" @click="CodesClick(fieldData)"
						style="font-size: 12px;">
						<text class="cuIcon-scan"></text>
					</button>
				</view> -->
      </view>
      <!-- 图片描述 -->
      <block class="img-explain" v-if="fieldData.option_img_explain">
        <view class="option_img_explain" @click="showOption_img = !showOption_img">
          <u-icon name="play-right-fill" color="#666" size="28" v-if="!showOption_img"></u-icon>
          <u-icon name="arrow-down-fill" color="#666" size="28" v-if="showOption_img"></u-icon>
          <text class="margin-left-xs">图片描述</text>
        </view>
        <u-image width="100%" height="300rpx" :src="getOptionImgExplain(fieldData.option_img_explain)"
          v-if="showOption_img"></u-image>
      </block>
      <view v-if="pageFormType === 'detail'" class="detail-text" :class="{'row-wrap':fieldData.isMulti}">
        <text class=""
          v-if="pageFormType === 'detail' && fieldData.type !== 'images' && fieldData.type !== 'snote' && fieldData.type !== 'Note' && fieldData.type !== 'file' && fieldData.col_type !== 'UserList'">
          {{ fieldData.valueForDisplay?fieldData.valueForDisplay: dictShowValue ? dictShowValue : treeSelectorShowValue ? treeSelectorShowValue : fieldData.value }}
        </text>
        <view class="" v-else-if="pageFormType === 'detail' && fieldData.isMulti">
          <view class="user-list">
            <text class="user-item" v-for="item in treeSelectorShowValue">{{item.disp||item||''}}</text>
          </view>
        </view>
        <view class="" v-html="fieldData.value"
          v-if="pageFormType === 'detail' && (fieldData.type === 'snote' || fieldData.type === 'Note')">
        </view>
        <view class="" v-else-if="fieldData.type === 'file'">
          <bxUploader :onAdd="false" :onDelete="false" :disabled="true" :formData="formDataRun"
            :serverHeader="reqHeader" :value="imagesUrl" :uploadApi="upLoadUrl" :deleteApi="deleteFileUrl"
            @on-add-change="addFileChange" @on-delete-change="deleteFileChange"></bxUploader>
        </view>
        <view class="" v-else-if="pageFormType === 'detail' && fieldData.type === 'images'">
          <image v-if="fieldData.type === 'images'" v-for="(item, index) in imagesUrl" :key="index"
            style="padding: 5upx;background-color: transparent;border-radius: 50%;border: 1px solid #fff;"
            class="cu-avatar radius lg" @tap="showModal(index, 'Image')" data-target="Image" :src="item"></image>
        </view>

      </view>

      <view class="form-content" :class="{
					alo_radio: fieldData.type === 'radio' || fieldData.type === 'radioFk' || fieldData.type === 'checkboxFk' || fieldData.type === 'checkbox' || fieldData.type === 'images',
					valid_error: !valid.valid
				}" v-if="pageFormType === 'form' || pageFormType === 'add' || pageFormType === 'update'">

        <u-radio-group v-model="fieldData.value" :size="60" @change="radioChange" v-if="fieldData.type === 'radio'"
          :class="!valid.valid ? 'valid_error' : ''">
          <u-radio class="radio" color="#0bc99d" :disabled="isDisabled ? isDisabled : false"
            v-for="(itema, index) in optionList" :name="itema" v-model="fieldData.value">
            <view style="max-width: 700rpx;">{{ itema }}</view>
          </u-radio>
        </u-radio-group>
        <!--<radio-group @change="radioChange" v-if="fieldData.type === 'radio'" :class="!valid.valid ? 'valid_error' : ''">
					<radio
						color="#0bc99d"
						:key="index"
						:disabled="isDisabled ? isDisabled : false"
						v-for="(itema, index) in optionList"
						class="radio"
						:checked="itema === fieldData.value"
						:value="itema"
					>
						<span style="flex: 1;padding-left: 10rpx;">{{ itema }}</span>
					</radio>
				</radio-group> -->
        <u-radio-group v-model="fieldData.value" :size="60" @change="radioChange" v-if="fieldData.type === 'radioFk'"
          :class="!valid.valid ? 'valid_error' : ''">
          <u-radio class="radio" color="#2979ff" :disabled="isDisabled ? isDisabled : false"
            v-for="(itema, index) in optionList" :name="itema.value" v-model="fieldData.value">
            <view class="radio-label">{{ itema.label ? itema.label : itema.value }}</view>
            <u-image width="100%" height="300rpx" v-if="itema.option_img_explain"
              :src="getOptionImgExplain(itema.option_img_explain)" mode="aspectFit"></u-image>
          </u-radio>
        </u-radio-group>
        <checkbox-group name="checkbox-group" class="checkbox-group" v-else-if="fieldData.type === 'checkbox'"
          :class="!valid.valid ? 'valid_error' : ''">
          <label v-for="(item, index) in optionList" :key="index" class="checkbox" @click="radioChange(item)">
            <checkbox color="#2979ff" :value="item" :disabled="isDisabled ? isDisabled : false"
              :checked="fieldData.value.indexOf(item) !== -1" />
            <text style="flex: 1;" class="text">{{ item }}</text>
          </label>
        </checkbox-group>
        <checkbox-group name="checkbox-group" class="checkbox-group" v-else-if="fieldData.type === 'checkboxFk'"
          :class="!valid.valid ? 'valid_error' : ''">
          <label v-for="(item, index) in optionList" :key="index" class="checkbox" @click="radioChange(item, index)">
            <checkbox color="#2979ff" class="blue" :class="isChecked(item.value) ? 'checked' : ''"
              :checked="isChecked(item.value) ? true : false" :value="item.value"></checkbox>
            <text style="flex: 1;" class="text">{{ item.label }}</text>
          </label>
        </checkbox-group>
        <view v-else-if="fieldData.type === 'images'">
          <robby-image-upload :value="imagesUrl" :enable-del="isDisabled ? !isDisabled : true"
            :enable-add="isDisabled ? !isDisabled : true" :server-url="upLoadUrl" @delete="deleteImage"
            @add="getImageInfo" :form-data="formData" :header="reqHeader" :showUploadProgress="true"
            :server-url-delete-image="deleteFileUrl" :limit="fieldData.fileNum"></robby-image-upload>
        </view>
        <view class="" v-else-if="fieldData.type === 'file'">
          <bxUploader :onAdd="false" :onDelete="false" :disabled="isDisabled" :formData="formDataRun"
            :serverHeader="reqHeader" :value="imagesUrl" :uploadApi="upLoadUrl" :deleteApi="deleteFileUrl"
            @on-add-change="addFileChange" @on-delete-change="deleteFileChange"></bxUploader>
        </view>
        <textarea style="min-height: 60px;width: 100%;"
          :maxlength="fieldData.item_type_attr && fieldData.item_type_attr.max_len ? fieldData.item_type_attr.max_len : 99999999"
          @blur="onInputBlur" @focus="onInputfocus" auto-height v-model="fieldData.value" @input="onInputChange"
          :disabled="isDisabled ? isDisabled : false" :class="!valid.valid ? 'valid_error' : ''"
          v-else-if="fieldData.type === 'textarea' && showTextarea" placeholder-style="font-size:14px;"
          :placeholder="'输入' + fieldData.label"></textarea>
        <input @click="!isDisabled?showRichText = true:''" type="text"
          v-if="(fieldData.type === 'snote' || fieldData.type === 'Note')" placeholder-style="font-size:14px;"
          :placeholder="'点击编辑' + fieldData.label" :value="html2text(fieldData.value)"
          :class="!valid.valid ? 'valid_error' : ''" name="input" :disabled="true" />
        <picker class="pickers" @change="PickerChange($event, fieldData)" :value="index" :range="picker"
          v-if="fieldData.type === 'poupchange'">
          <input type="text" placeholder-style="font-size:14px;" :placeholder="'点击编辑' + fieldData.label"
            :value="picker[index]" :class="!valid.valid ? 'valid_error' : ''" name="input" :disabled="true" />
        </picker>
        <view class="content padding-0"
          style="padding:0;width: 100%!important;flex-direction: column;position: relative;"
          v-else-if="fieldData.type === 'date' || fieldData.type === 'dateTime' || fieldData.type === 'time' || fieldData.type === 'Date'">
          <input @blur="onInputBlur" @input="onInputChange" v-model="fieldData.value" disabled class="date-input"
            @click.stop="isDisabled ? false : toggleTab(fieldData.type)" placeholder-style="font-size:14px;"
            :placeholder="'请选择' + fieldData.label" :class="!valid.valid ? 'valid_error' : ''" style="width: 100%;"
            name="input" />
          <text class="input-icon cuIcon-calendar" style="position: absolute;top:10upx;right: 20upx;color: #0bc99d;"
            @click.stop="isDisabled ? false : toggleTab(fieldData.type)"></text>

          <w-picker mode="date" startYear="1900" endYear="2030" :current="false" @confirm="onConfirm"
            :disabledAfter="false" ref="date" themeColor="#f00"></w-picker>
          <w-picker mode="date" startYear="1900" endYear="2030" :current="false" @confirm="onConfirm"
            :disabledAfter="false" ref="Date" themeColor="#f00"></w-picker>
          <w-picker mode="yearMonth" startYear="1900" endYear="2030" :current="false" @confirm="onConfirm"
            :disabledAfter="false" ref="yearMonth" themeColor="#f00"></w-picker>
          <w-picker mode="dateTime" startYear="1900" endYear="2030" step="1" :current="false" @confirm="onConfirm"
            ref="dateTime" themeColor="#f00"></w-picker>
          <w-picker mode="time" :current="false" @confirm="onConfirm" ref="time" step="1"></w-picker>
        </view>
        <!-- fieldData.type === 'list' 选项列表 -->
        <view v-else-if="fieldData.type === 'list'">
          <view class="cu-list menu card-menu ">
            <view class="cu-item" v-for="(item, index) in optionsDatasRun" :key="index">
              <view class="content solid">
                <text class="cuIcon-tagfill text-blue  margin-right-xs"
                  :class="{ 'text-green': '' }">{{ index + 1 }}</text>
                <input class="input-sm" type="text" disabled placeholder-style="font-size:14px;"
                  :placeholder="'点击右侧按钮编辑'" v-model="item['model'][fieldData.optionsConfig['key_col']['value']]"
                  @input="changeVal(item, optionsDatas[index], index)" />
              </view>
              <view class="buttons">
                <view v-if="item.type !== 'draft' && item['model']['option_value']" class="cu-btn  bg-blue light"
                  style="height:2.4em;min-height: 1.6em;line-height: 1.6em;" @click="addListOptions(index, 'update')">
                  编辑
                </view>
                <view v-if="item.type === 'draft'" class="cu-btn  bg-blue light"
                  style="height:2.4em;min-height: 1.6em;line-height: 1.6em;" @click="addListOptions(index, 'add')">
                  添加
                </view>
                <view v-if="item.type !== 'draft'" class="cu-btn  bg-orange light"
                  style="height:2.4em;min-height: 1.6em;line-height: 1.6em;" @click="deleteListOptions(index)">
                  删除
                </view>
              </view>
            </view>
          </view>
        </view>
        <input @blur="onInputBlur" type="number" placeholder-style="font-size:14px;"
          :placeholder="'输入' + fieldData.label" @input="onInputChange"
          :max="fieldData.item_type_attr && fieldData.item_type_attr.max ? fieldData.item_type_attr.max : 999"
          :min="fieldData.item_type_attr && fieldData.item_type_attr.min ? fieldData.item_type_attr.min : -999"
          v-model.number="fieldData.value" :class="!valid.valid ? 'valid_error' : ''" name="input"
          :disabled="isDisabled ? isDisabled : false" v-else-if="fieldData.type === 'number'" />
        <input @blur="onInputBlur" type="digit" placeholder-style="font-size:14px;"
          :placeholder="'输入' + fieldData.label" @input="onInputChange" :disabled="isDisabled ? isDisabled : false"
          :max="fieldData.item_type_attr && fieldData.item_type_attr.max ? fieldData.item_type_attr.max : 999999"
          :min="fieldData.item_type_attr && fieldData.item_type_attr.min ? fieldData.item_type_attr.min : -999"
          v-model.number="fieldData.value" :class="!valid.valid ? 'valid_error' : ''" name="input"
          v-else-if="fieldData.type === 'digit' || fieldData.type === 'Float'" />
        <view v-else-if="fieldData.type === 'treeSelector'" @click="openTreeSelector">
          <view :class="{'text-blue':!fieldData.value}" v-if="!fieldData.isMulti">
            {{fieldData.value||treeSelectorShowValue||fieldData.value||'点击选择'}}
          </view>
          <view class="treeSelector-input" v-else-if="isArray(treeSelectorShowValue)">
            <text class="user-item" v-for="item in treeSelectorShowValue">{{item.disp||item||''}}</text>
            <text v-if="treeSelectorShowValue.length===0" class="text-blue">点击选择</text>
          </view>
          <view class="treeSelector-input" v-else-if="!treeSelectorShowValue">
            <text v-if="!treeSelectorShowValue" class="text-blue">点击选择</text>
          </view>
          <!-- 				<input :placeholder="'点击选择' + fieldData.label"
						:value="fieldData.valueForDisplay?fieldData.valueForDisplay:treeSelectorShowValue" disabled
						:class="!valid.valid ? 'valid_error' : ''" name="input" /> -->
        </view>
        <view v-else-if="fieldData.type === 'cascader'" @click="openCascader">
          <input :placeholder="'点击选择' + fieldData.label" v-model="fieldData.value" disabled
            :class="!valid.valid ? 'valid_error' : ''" name="input" />
        </view>
        <view class="item-group flex align-center" style="" v-else-if="fieldData.type === 'input'">
          <input @blur="onInputBlur"
            :maxlength="fieldData.item_type_attr && fieldData.item_type_attr.max_len ? fieldData.item_type_attr.max_len :999999999"
            :disabled="isDisabled ? isDisabled : false" placeholder-style="font-size:14px;"
            :placeholder="'输入' + fieldData.label" v-model="fieldData.value" @input="onInputChange"
            :class="!valid.valid ? 'valid_error' : ''" name="input" type="text" />
        </view>
        <view class="item-group flex align-center" style=""
          v-else-if="fieldData&&fieldData.type&&fieldData.type.indexOf('undefined')!==-1">
          <input @blur="onInputBlur" :disabled="isDisabled ? isDisabled : false" placeholder-style="font-size:14px;"
            :placeholder="'输入' + fieldData.label" v-model="fieldData.value" @input="onInputChange"
            :class="!valid.valid ? 'valid_error' : ''" name="input" type="text" />
        </view>
        <!-- 字段按钮组 -->
        <block v-if="fieldData.buttons && fieldData.buttons.length > 0">
          <view class="grid text-center col-4" style="min-width: 25%;">
            <view class="padding-sm " :class="btn.color ? 'line-' + btn.color : 'line-blue'"
              @click.stop="onButtons(fieldData, btn)" :key="index" v-for="(btn, index) in fieldData.buttons">
              <text :class="btn.icon"></text>
              {{ btn.name }}
            </view>
          </view>
        </block>
      </view>
    </view>
    <view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
      <view class="cu-dialog" style="height: 100vh;width:100vw;z-index: 999999;">
        <view class="bg-img"
          :style="'background-image: url(' + imagesUrl[imageIndex] + ');height:100%;background-size:100%;'">
          <view class="cu-bar justify-end text-blue">
            <view class="action" @tap="hideModal"><text class="cuIcon-close text-blue"></text></view>
          </view>
        </view>
        <!-- <view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">关闭</view>
				</view> -->
      </view>
    </view>
    <view class="cu-modal bottom-modal" :class="{ show: showTreeSelector }">
      <view class="cu-dialog tree-selector">
        <u-search :show-action="false" action-text="搜索" :animation="true" :shape="'square'" v-model="treeSearchVal"
          @change="getTreeSelectorDataWithKey" @clear="getTreeSelectorData" style="margin: 20rpx;"></u-search>
        <bxTreeSelector :srvInfo="isArray(fieldData.option_list_v2) ? null : fieldData.option_list_v2"
          :treeData="treeSelectorData" :childNodeCol="'_childNode'" :isMulti="fieldData.isMulti"
          @multi-change="multiChange" :defaultData="fieldData.value"
          :disColName="fieldData && fieldData.option_list_v2 && fieldData.option_list_v2['key_disp_col'] ? fieldData.option_list_v2['key_disp_col'] : ''"
          :nodeKey="fieldData.option_list_v2 && fieldData.option_list_v2['refed_col'] ? fieldData.option_list_v2['refed_col'] : 'no'"
          @clickParentNode="onTreeGridChange" @clickLastNode="onMenu"></bxTreeSelector>
        <u-loadmore @loadmore="loadMoreTreeData" :status="treeDataStatus" :load-text="loadText"
          v-if="!fieldData.option_list_v2||!fieldData.option_list_v2.is_tree" />
        <view class="dialog-button">
          <view class="cu-btn bg-gray round shadow margin-right" @tap="hideTreeSelector">取消</view>
          <view class="cu-btn bg-blue shadow round" @tap="confirmTreeSelector" v-if="fieldData.isMulti">确定
          </view>
        </view>
      </view>
    </view>
    <view class="cu-modal bottom-modal" :class="{ show: showRichText }" v-if="showRichText">
      <view class="cu-dialog rich-text">
        <bx-editor :field="fieldData" ref="bxEditor" @fieldData-value-changed="editorValueChange"></bx-editor>
        <view class="dialog-button">
          <view class="cu-btn bg-grey shadow margin-right" @tap="showRichText = false">取消</view>
          <view class="cu-btn bg-blue shadow" @tap="
							showRichText = false;
							saveEditorValue();
						">
            确定
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom" @change="changePopup">
      <cascader-selector @getCascaderValue="getCascaderValue" :srvInfo="fieldData.srvInfo"
        :defaultLineVal="defaultLineVal"></cascader-selector>
    </uni-popup>
  </view>
</template>
<script>
  import jweixin from '@/node_modules/jweixin-module/lib/index.js'
  import wPicker from '@/components/w-picker/w-picker.vue';
  import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
  import cascaderSelector from '@/components/cascader/cascaderSelector.vue';
  import uniPopup from '@/components/uni-popup/uni-popup.vue';
  // import bxTreeSelector from '@/components/bx-tree-selector/bx-tree-selector.vue';
  import bxTreeSelector from '@/components/tree-selector/tree-selector.vue';
  import bxEditor from '@/components/ueditor/ueditor.vue';
  import attachment from '@/components/file-upload/file-upload.vue';
  import bxUploader from '@/components/bx-u-uploader/bx-u-uploader.vue';
  let _this = null;
  export default {
    name: 'bxFormItem',
    components: {
      wPicker,
      robbyImageUpload,
      cascaderSelector,
      uniPopup,
      bxEditor,
      bxTreeSelector,
      attachment,
      bxUploader
    },
    props: {
      referencedColName: {
        type: String,
        default: ''
      },
      field: {
        type: Object,
        default () {
          return {};
        }
      },
      procData: {
        type: Object,
        default () {
          return {};
        }
      },
      detailFiledData: {
        type: Object,
        default () {
          return {};
        }
      },
      pageFormType: {
        type: String,
        default: 'form'
      },
      showTextarea: {
        type: Boolean,
        default: true
      },
      fieldsModel: {
        type: Object,
        default () {
          return {};
        }
      },
      service: {
        type: String,
        default () {
          return '';
        }
      },
      appno: {
        type: String
      },
      // 主表数据
      mainData: {
        type: Object
      }
    },
    name: 'formItem',
    data() {
      return {
        bodyTop: '',
        showOption_img: false, // 是否显示图片描述
        defaultLineVal: '',
        imageIndex: null,
        modalName: null,
        formData: {
          serviceName: 'srv_bxfile_service',
          interfaceName: 'add',
          app_no: '',
          table_name: '',
          columns: '',
          file_no: ""
        },
        fieldModelsData: this.fieldsModel,
        reqHeader: null,
        fieldData: this.field,
        valid: {
          column: this.field.column,
          valid: true,
          msg: '不能为空!'
        },
        deleteFileUrl: this.$api.deleteFile,
        upLoadUrl: this.$api.upload,
        imagesUrl: [],
        title: 'Hello',
        startYear: new Date().getFullYear(),
        optionsDatas: [],
        listModel: {},
        listRedundance: [],
        showOptionsList: false,
        treeSelectorData: [],
        treeDataStatus: 'loadmore',
        loadText: {
          loadmore: '点击加载更多',
          loading: '努力加载中',
          nomore: '数据已经全部加载完成'
        },
        treeSearchVal: '',
        showTreeSelector: false,
        showRichText: false,
        attachmentList: [],
        uploadFileUrl: this.$api.upload,
        header: '',
        index: -1,
        picker: ['网络状况较差，请稍后进行选择'],
        modelData: '',
        oriPicker: [],
        treeSelectorShowValue: '', //属性选择器input框中显示的值
        multiSelectValue: [],
        multiSelectData: [],
        treePageInfo: {
          total: 0,
          rownumber: 20,
          pageNo: 1
        },
      };
    },
    updated() {},
    computed: {
      isDisabled: function() {
        let self = this
        let isDisabled = self.fieldData.disabled
        let colName = self.fieldData.column
        if (colName === self.referencedColName) {
          isDisabled = true
          self.$set(self.fieldData, 'showExp', false)

        }
        return isDisabled
      },
      dictShowValue() {
        let self = this
        let option_list_v2 = self.fieldData.option_list_v2;
        let arr = null
        if (self.fieldData.col_type === 'Dict' && option_list_v2.length > 0) {
          let disValue;
          disValue = option_list_v2.filter((item) => item.value === self.fieldData.value)
          // console.log('dictShowValue',disValue,arr,self.fieldData.value,option_list_v2)
          arr = disValue[0];
        } else if (self.fieldData.col_type === 'fk' && self.fieldData.hasOwnProperty('colData')) {
          if (option_list_v2.show_as_pair !== false) {
            arr =
              `${self.fieldData.colData[option_list_v2.refed_col]}/${self.fieldData.colData[option_list_v2.key_disp_col]}`
          } else {
            arr = `${self.fieldData.colData[option_list_v2.key_disp_col]}`
          }
        }
        if (arr && arr.label) {
          return arr.label
        } else {
          return arr
        }
      },
      showOptionsListRun: function() {
        return this.showOptionsList;
      },
      optionList: function() {
        if (Array.isArray(this.fieldData.options)) {
          if (this.fieldData.disabled && this.fieldData.value && this.pageFormType === 'update') {
            if (['radioFk', 'checkboxFk'].includes(this.fieldData.type)) {
              if (this.fieldData.type === 'radioFk') {
                return this.fieldData.options.filter(item => item.value === this.fieldData.value)
              } else {
                return this.fieldData.options.filter(item => this.fieldData.value.indexOf(item
                  .value) !== -1)
              }
            } else {
              if (this.fieldData.type === 'radio') {
                return this.fieldData.options.filter(item => item === this.fieldData.value)
              } else {
                return this.fieldData.options.filter(item => this.fieldData.value.indexOf(item) !== -1)
              }
            }
          } else {
            return this.fieldData.options
          }
        } else {
          return []
        }
      },
      redundance: function() {
        if (this.fieldData.type === 'list') {
          let colKey = this.fieldData.optionsConfig.conditions;
          let colKeys = colKey.map((item, index) => {
            return item.value;
          });
          return colKeys;
        }
      },
      listChildModel: {
        get: function() {
          let self = this;
          if (self.fieldData.type === 'list') {
            let listItemModel = self.deepClone(self.fieldData.optionsConfig.model);
            let colKey = self.fieldData.optionsConfig.conditions;
            for (let i = 0; i < colKey.length; i++) {
              listItemModel[colKey[i].colName] = self.fieldModelsData[colKey[i].value];
            }
            let req = {
              type: 'draft',
              model: listItemModel
            };
            self.listModel = self.deepClone(req);
            return self.listModel;
          }
        },
        set: function(v) {
          this.listModel = v;
        }
      },
      fieldModelsDataRun() {
        return this.fieldModelsData;
      },
      optionsDatasRun: function() {
        let datas = [];
        if (this.optionsDatas && this.listChildModel) {
          datas = this.deepClone(this.optionsDatas);
          datas.push(this.deepClone(this.listChildModel));
        }
        return datas;
      },
      formDataRun: function() {
        let formData = {
          serviceName: 'srv_bxfile_service',
          interfaceName: 'add',
          app_no: '',
          table_name: '',
          columns: ''
        }
        if (this.fieldData.type === 'images') {
          formData['app_no'] = this.appno || uni.getStorageSync('activeApp');
          // this.formData['table_name'] = this.fieldData.srvInfo.tableName;
          formData['columns'] = this.fieldData.column;
          formData['table_name'] = this.fieldData.srvInfo.tableName;
          if (this.fieldData.value !== '' && this.fieldData.value !== null && this.fieldData.value !==
            undefined) {

            formData['file_no'] = this.fieldData.value;
          } else {

            // formData['file_no'] = this.GenNonDuplicateID('batchno_')
          }
        } else if (this.fieldData.type === 'file') {

          formData['app_no'] = this.appno || uni.getStorageSync('activeApp');
          // this.formData['table_name'] = this.fieldData.srvInfo.tableName;
          formData['columns'] = this.fieldData.column;
          formData['table_name'] = this.fieldData.srvInfo.tableName;
          if (this.fieldData.value !== '' && this.fieldData.value !== null && this.fieldData.value !==
            undefined) {
            formData['file_no'] = this.fieldData.value;
          } else {
            // formData['file_no'] = this.GenNonDuplicateID('batchno_')
          }
        }
        return formData
      }
    },
    mounted() {

      // #ifdef H5
      this.bodyTop = document.body.clientHeight;
      // #endif
      if (this.fieldData.type === 'poupchange') {
        this.getpoupInfo(this.fieldData.option_list_v2);
      }

      if (this.fieldData.type === 'treeSelector' && this.fieldData.display !== false) {
        let cond = null
        if (this.pageFormType === 'detail' && this.fieldData.value) {
          cond = [{
            colName: this.fieldData?.option_list_v2?.refed_col,
            ruleType: 'eq',
            value: this.fieldData.value
          }]
        }
        this.getTreeSelectorData(cond).then(_ => {
          let fieldData = this.fieldData;
          if (fieldData.value === '[]') {
            this.fieldData.valueForDisplay = ''
            this.treeSelectorShowValue = ''
            this.$emit('on-value-change', this.fieldData);
            return
          }
          if (this.fieldData.col_type === "UserList" && this.fieldData.value && typeof this.fieldData
            .value === 'string') {
            try {
              this.fieldData.value = JSON.parse(this.fieldData.value)
            } catch (e) {
              //TODO handle the exception
            }
          }
          if (fieldData.type === 'treeSelector') {
            if (fieldData.col_type !== 'User' && fieldData.col_type !== 'UserList') {
              if (fieldData.colData && fieldData.value) {
                if (fieldData.option_list_v2?.show_as_pair !== false) {
                  if (fieldData.option_list_v2.refed_col === fieldData.option_list_v2.key_disp_col) {
                    this.treeSelectorShowValue =
                      `${fieldData.colData[fieldData.option_list_v2.refed_col]}`;
                  } else {
                    this.treeSelectorShowValue =
                      `${fieldData.colData[fieldData.option_list_v2.refed_col]}/${fieldData.colData[fieldData.option_list_v2.key_disp_col]}`;
                  }

                } else {
                  this.treeSelectorShowValue =
                    `${fieldData.colData[fieldData.option_list_v2.key_disp_col]?fieldData.colData[fieldData.option_list_v2.key_disp_col]:fieldData.value}`;
                }
                this.fieldData.valueForDisplay = this.treeSelectorShowValue || this.fieldData
                  .valueForDisplay
              } else if (!fieldData.colData || !fieldData.value) {
                this.treeSelectorShowValue = this.fieldData.valueForDisplay ? this.fieldData
                  .valueForDisplay : this.fieldData.value
              }
              this.$emit('on-value-change', this.fieldData);
            } else {
              if (fieldData.colData && fieldData.value) {
                this.treeSelectorShowValue =
                  `${fieldData.colData[fieldData.option_list_v2.key_disp_col]}`;
                this.fieldData.valueForDisplay = this.treeSelectorShowValue || this.fieldData
                  .valueForDisplay
              } else if (!fieldData.colData || !fieldData.value) {
                this.treeSelectorShowValue = this.fieldData.valueForDisplay ? this.fieldData
                  .valueForDisplay : this.fieldData.value
              }
              this.$emit('on-value-change', this.fieldData);
            }
          }
        });
      }
      // console.log('this.fieldData', this.fieldData);
    },
    created() {
      if (this.field.value === null) {
        this.field.value = '';
      }
      this.fieldData = this.field;
      this.reqHeader = {
        bx_auth_ticket: uni.getStorageSync('bx_auth_ticket')
      };
      if (this.fieldData.type === 'images') {
        this.formData = {
          serviceName: 'srv_bxfile_service',
          interfaceName: 'add',
          app_no: '',
          table_name: '',
          columns: ''
        };

        // this.formData['app_no'] = this.fieldData.srvInfo.appNo;
        this.formData['app_no'] = uni.getStorageSync('activeApp');
        // this.formData['table_name'] = this.fieldData.srvInfo.tableName;
        this.formData['columns'] = this.fieldData.column;
        this.formData['table_name'] = this.fieldData.srvInfo.tableName;
        if (this.fieldData.value !== '' && this.fieldData.value !== null && this.fieldData.value !== undefined) {

          this.formData['file_no'] = this.fieldData.value;
        } else {

          // this.formData['file_no'] = this.GenNonDuplicateID('batchno_')
        }
      } else if (this.fieldData.type === 'file') {
        this.formData = {
          serviceName: 'srv_bxfile_service',
          interfaceName: 'add',
          app_no: '',
          table_name: '',
          columns: ''
        };

        this.formData['app_no'] = this.fieldData.srvInfo.appNo;
        // this.formData['table_name'] = this.fieldData.srvInfo.tableName;
        this.formData['columns'] = this.fieldData.column;
        this.formData['table_name'] = this.fieldData.srvInfo.tableName;
        if (this.fieldData.value !== '' && this.fieldData.value !== null && this.fieldData.value !== undefined) {

          this.formData['file_no'] = this.fieldData.value;
        } else {

          // this.formData['file_no'] = this.GenNonDuplicateID('batchno_')
        }
      }
      if (this.fieldData.type === 'cascader') {
        this.formData['serviceName'] = this.fieldData.srvInfo.serviceName;
        this.formData['app_no'] = this.fieldData.srvInfo.appNo;
      }
      // if (this.fieldData.type === 'treeSelector') {
      //   this.getTreeSelectorData();
      // }
      if (this.fieldData.type === 'list') {
        if (this.fieldData.options && this.fieldData.options.length > 0) {
          this.optionsDatas = this.fieldData.options.map((item, index) => {
            let obj = {
              model: item,
              type: 'update'
            };
            return obj;
          });
        }
      } else if (Array.isArray(this.fieldData.options) && this.fieldData.options.length > 0) {
        this.fieldData.options = this.fieldData.options.map(item => {
          if (this.fieldData.type === 'checkboxFk') {
            if (Array.isArray(this.fieldData.value) && this.fieldData.value.includes(item.value)) {
              item.checked === true;
            } else {
              item.checked === false;
            }
          }
          return item;
        });
      }
      this.getDefVal();
    },
    methods: {
      initJssdk: function(callback) {
        var self = this
        return new Promise((resolve) => {
          let linkurl = window.location.href.split('#')[0];
          let req = {
            serviceName: 'srvwx_app_signature_select',
            colNames: ['*'],
            condition: [{
                colName: 'app_no',
                ruleType: 'eq',
                value: this.$api.appNo.wxh5
              },
              {
                colName: 'page_url',
                ruleType: 'eq',
                value: linkurl
                // value: window.location + ''
              }
            ]
          };
          self.$http.post(self.$api.getSignature, req).then(res => {
            if (res.data.state === 'SUCCESS') {
              let resData = res.data.data[0];
              console.log('getSignature', resData);
              jweixin.config({
                debug: false, // 调试阶段建议开启
                appId: resData.appId, // APPID
                timestamp: resData.timestamp, // 时间戳timestamp
                nonceStr: resData.noncestr, // 随机数nonceStr
                signature: resData.signature, // 签名signature
                // 需要调用的方法接口
                jsApiList: [
                  'scanQRCode',
                ]
              });
              resolve(res.data)
            } else {
              uni.showToast({
                title: '获取签名失败',
                icon: 'none'
              });
            }
          });
        })
      },
      async CodesClick(e) {
        const res = await this.initJssdk()
        console.log(res)
        console.log(e)
        jweixin.ready(function() {
          jweixin.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function(res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              console.log(result, res)
              e.valueForDisplay = result
              uni.showToast({
                title: result,
                icon: 'none'
              });
            }
          });
        })
      },
      getOptionImgExplain(e) {
        if (e) {
          return this.$api.downloadFile + e + '&bx_auth_ticket=' + uni.getStorageSync('bx_auth_ticket');
        }
      },
      async getpoupInfo(info) {
        let serviceName = info.serviceName;
        let req = {
          serviceName: serviceName,
          colNames: ['*'],
          condition: []
        };
        if (info.hasOwnProperty('conditions')) {
          for (let i = 0; i < info.conditions.length; i++) {
            let obj = info.conditions[i]
            let val = obj.value
            if (obj.value.indexOf('.')) {
              let key = obj.value.split('.')
              obj.value = self.procData[key[1]]
            }
            req.condition.push(obj)
          }
        }
        let res = await this.onRequest('select', serviceName, req, info.srv_app);
        if (res.data.state === 'SUCCESS') {
          this.oriPicker = res.data.data;
          let resData = [];
          res.data.data.forEach(item => {
            resData.push(item.name);
          });
          this.picker = resData;
          // this.procBasicConfig = res.data;
          // console.log('--------------', res.data.data);
        }
        // console.log('获取选择楼房');
      },
      async getChangePoupInfo(info) {
        //
        let serviceName = info.option_list_v2.serviceName;
        let value = '';
        let condition = [];
        let isOk = false;
        if (info.column === 'dybm') {
          // value = info.poupValue
          condition = [{
            colName: info.option_list_v2.conditions[0].colName,
            ruleType: 'eq',
            value: info.poupValue
          }];
          isOk = true;
        } else if (info.column === 'fwbm' && info.louValue && info.dyValue) {
          condition = [{
              colName: 'lybm',
              ruleType: 'eq',
              value: info.louValue
            },
            {
              colName: 'dybm',
              ruleType: 'eq',
              value: info.dyValue
            }
          ];
          isOk = true;
        }
        let req = {
          serviceName: serviceName,
          colNames: ['*'],
          condition: condition
        };
        if (isOk) {
          let res = await this.onRequest('select', serviceName, req, info.srv_app);
          if (res.data.state === 'SUCCESS') {
            this.oriPicker = res.data.data;
            let resData = [];
            res.data.data.forEach(item => {
              resData.push(item.name);
            });
            this.picker = resData;
            this.procBasicConfig = res.data;
            // console.log('--------------', res.data.data);
          }
          // console.log('获取选择楼房');
        }
      },
      saveEditorValue() {
        if (this.fieldData.editValue) {
          this.fieldData.value = this.fieldData.editValue;
        }
        this.getValid();
        this.$emit('on-value-change', this.fieldData.editorData);
      },
      editorValueChange(name, e) {
        this.fieldData.editValue = e.value;
        e.column = e.info.name;
        this.fieldData.editorData = e;
      },
      PickerChange(e, itemFile) {
        let self = this;
        // console.log('change----', e.detail.value);
        this.index = e.detail.value;
        let oriItem = null;
        this.oriPicker.forEach((ori, index) => {
          if (ori.name == this.picker[e.detail.value]) {
            oriItem = ori;
            if (itemFile.column == 'lybm') {
              self.fieldData.value = ori.lybm;
            }
            if (itemFile.column == 'dybm') {
              self.fieldData.value = ori.dybm;
            }
            if (itemFile.column == 'fwbm') {
              self.fieldData.value = ori.fwbm;
            }
            // this.fieldData.value = this.picker[this.index]
          }
        });
        this.$emit('picker-change', oriItem);
      },
      changeVal(newval, oldval, index) {
        // list中input绑定的值改变时触发
        setTimeout(() => {
          if (this.optionsDatasRun[index] && this.optionsDatas[index]) {
            let newValue = this.optionsDatasRun[index]['model'][this.fieldData
              .optionsConfig['key_col']
              ['value']
            ];
            let oldValue = this.optionsDatas[index]['model'][this.fieldData
              .optionsConfig['key_col'][
                'value'
              ]
            ];
            if (newValue !== oldValue) {
              this.$set(this.optionsDatas[index], 'valueChanged', true);
            } else {
              this.$set(this.optionsDatas[index], 'valueChanged', false);
            }
          }
        }, 0);
      },
      addListOptions(index, type) {
        let self = this;
        let sers = this.fieldData.optionsConfig.addServiceName;
        let app = this.fieldData.optionsConfig.appNo;
        let datas = this.optionsDatasRun[index]['model'];
        for (let key in this.redundance) {
          datas[this.redundance[key]] = this.fieldModelsDataRun[this.redundance[key]];
        }
        if (this.fieldData.optionsConfig['key_col'].hasOwnProperty('no')) {
          datas[this.fieldData.optionsConfig['key_col'].no] = index + 1;
        }
        let req = [{
          serviceName: sers,
          data: [datas]
        }];
        if (self.optionsDatasRun[index]['type'] === 'draft' && type === 'add') {
          self.$emit('show-option-list', {
            data: self.optionsDatasRun[index],
            config: self.fieldData.optionsConfig
          });
          return;
          this.onRequest('add', sers, req, app).then(res => {
            if (res.data.state === 'SUCCESS') {
              self.optionsDatasRun[index]['type'] = 'update';
              self.optionsDatasRun[index]['model'] = res.data.response[0].response
                .effect_data[0];
              if (!self.optionsDatas[index]) {
                self.optionsDatas.push(self.deepClone(self.optionsDatasRun[
                  index]));
              }
              // console.log('选项添加成功', res.data.response[0].response);
            }
          });
        } else if (type === 'update') {
          // 编辑选项
          self.$emit('show-option-list', {
            data: self.optionsDatasRun[index],
            config: self.fieldData.optionsConfig
          });
          return;
        }
        // console.log('保存', index, self.optionsDatasRun[index]);
      },
      deleteListOptions(index) {
        let self = this;
        let sers = self.fieldData.optionsConfig.deleteServiceName;
        let app = self.fieldData.optionsConfig.appNo;
        let key = self.optionsDatas[index]['model'].id;
        let req = [{
          serviceName: sers,
          condition: [{
            colName: 'id',
            ruleType: 'eq',
            value: key
          }]
        }];
        if (self.optionsDatas[index]['type'] !== 'draft') {
          self.onRequest('delete', sers, req, app).then(res => {
            if (res.data.state === 'SUCCESS') {
              self.optionsDatas.splice(index, 1);
              // console.log('删除成功', res.data);
            }
          });
        }
      },
      showModal(e, i) {
        this.modalName = i;
        this.imageIndex = e;
      },
      hideModal(e) {
        this.modalName = null;
      },
      deleteImage(e) {
        // console.log(e);
        this.fieldData.value = '';
      },
      onTreeSelector(e) {
        this.fieldData.value = e;
        this.onInputChange();
        // console.log('点击了onTreeSelector', this.fieldData, e);
      },
      getFileInfo(e) {
        // console.log('文件上传成功', e);
        if (e.response.file_no) {

          this.fieldData.value = e.response.file_no;
        }
      },
      addFileChange(e) {
        console.log('addFileChange', e)
        let fileList = e.allImages
        this.fieldData.value = fileList[0].fileNo || '';
        this.$emit('on-value-change', this.fieldData);
        if (this.fieldData.value !== '' && this.fieldData.value !== null && this.fieldData
          .value !== undefined) {

          this.formData['file_no'] = this.fieldData.value;
        }
        this.getDefVal()
        setTimeout(() => { // 子组件的值更改后传递到父组件 再从父组件传递到子组件 有延迟 所以加上延时器
          this.onInputChange();
        }, 200)
      },
      deleteFileChange(e) {
        let self = this
        let fileList = e.allImages
        if (fileList.length == 0) {
          self.fieldData.value = ''
        }
        this.getDefVal();
        setTimeout(() => {
          this.onInputChange();
        }, 200)
        console.log('deleteFileChange', e)
      },
      getImageInfo(e) {
        let res = JSON.parse(e.allImages[0]);
        this.fieldData.value = res.file_no;
        console.log('图片返回：', e, e.allImages[0], res, this.fieldData.value);
        if (this.fieldData.value !== '' && this.fieldData.value !== null && this.fieldData
          .value !== undefined) {

          this.formData['file_no'] = this.fieldData.value;
        }
        this.onInputChange();
        this.getDefVal();
      },
      onButtons(e, b) {
        let item = e;
        let button = b;
        this.$emit('on-form-item', {
          button,
          item
        });
      },
      async getDefVal() {
        let self = this;
        if ((this.fieldData.type === 'images') && this.fieldData.value !== '') {
          let fileDatas = await self.getFilePath(this.fieldData.value);
          console.log(fileDatas);
          self.imagesUrl = [];
          if (fileDatas) {
            for (let i = 0; i < fileDatas.length; i++) {
              console.log('file:2', self.$api.getFilePath + fileDatas[i].fileurl);
              self.imagesUrl.push(self.$api.getFilePath + fileDatas[i].fileurl +
                '&bx_auth_ticket=' + uni
                .getStorageSync(
                  'bx_auth_ticket'));
            }
          }
        } else if (this.fieldData.type === 'list' && this.fieldData.value !== '') {
          // 选项列表
          let listItemModel = this.fieldData.optionsConfig.model;
          let colKey = this.fieldData.optionsConfig.conditions;
          for (let i = 0; i < colKey.length; i++) {
            this.$set(this.listModel, colKey[i].colName, this.fieldModelsData[colKey[i]
              .value]);
            this.listModel[colKey[i].colName] = this.fieldModelsData[colKey[i].value];
          }
        } else if (this.fieldData.type === 'file') {
          if (this.fieldData.value) {
            let fileDatas = await self.getFilePath(this.fieldData.value);
            console.log(fileDatas);
            self.imagesUrl = [];
            if (fileDatas) {
              for (let i = 0; i < fileDatas.length; i++) {
                console.log('file:2', self.$api.getFilePath + fileDatas[i].fileurl);
                let obj = {
                  url: self.$api.getFilePath + fileDatas[i].fileurl +
                    '&bx_auth_ticket=' + uni
                    .getStorageSync('bx_auth_ticket'),
                  name: fileDatas[i].src_name,
                  type: fileDatas[i].file_type,
                  appNo: fileDatas[i].app_no,
                  fileNo: fileDatas[i].file_no
                }
                self.imagesUrl.push(obj);
              }
            }
          } else {
            self.imagesUrl = []
          }
        } else if (this.fieldData.type === 'treeSelector' && this.fieldData.disabled == true) {
          this.getTreeSelectorData()
        } else {
          Object.keys(this.fieldsModel).forEach(key => {
            if (this.fieldData.column === key && !this.fieldData.value && this
              .fieldsModel[key]) {
              this.fieldData.value = this.fieldsModel[key];
            }
          });
        }
      },
      radioChange(e, index) {
        if (this.fieldData.type === 'radioFk') {
          this.$emit('on-value-change', this.fieldData);
        } else {
          if (this.fieldData.type === 'checkboxFk') {
            let arr = this.fieldData.value;
            if (arr) {
              if (typeof arr === 'string') {
                arr = arr.split(',')
              }
            } else {
              arr = []
            }
            if (Array.isArray(arr)) {
              if (arr.indexOf(e.value) === -1) {
                arr.push(e.value);
              } else {
                arr.splice(arr.indexOf(e.value), 1);
              }
            } else if (!arr && typeof arr === 'string') {
              arr = [e.value]
            }
            this.fieldData.value = arr.toString();
          } else if (this.fieldData.type === 'checkbox') {
            if (Array.isArray(this.fieldData.value)) {
              let arr = this.deepClone(this.fieldData.value);
              if (arr) {
                if (typeof arr === 'string') {
                  arr = arr.split(',')
                }
              } else {
                arr = []
              }
              if (Array.isArray(arr)) {
                if (arr.indexOf(e.value) === -1) {
                  arr.push(e.value);
                } else {
                  arr.splice(arr.indexOf(e.value), 1);
                }
              } else if (!arr && typeof arr === 'string') {
                arr = [e.value]
              }
              // if (Array.isArray(arr) && arr.indexOf(e) === -1) {
              // 	arr.push(e);
              // } else {
              // 	arr.splice(arr.indexOf(e), 1);
              // }
              this.fieldData.value = arr.toString();
            }
          }
          this.onInputBlur();
          this.$emit('on-value-change', this.fieldData);
          this.getValid();
        }
      },
      onInputChange(e) {
        if (this.fieldData.type === 'number' || this.fieldData.type === 'digit') {
          setTimeout(() => {
            if (this.fieldData.item_type_attr && this.fieldData.item_type_attr
              .max) {
              console.log(this.fieldData.item_type_attr.max, this.fieldData
                .value);
              if (Number(this.fieldData.value) > Number(this.fieldData
                  .item_type_attr.max)) {
                this.fieldData.value = Number(this.fieldData.item_type_attr
                  .max);
              }
              if (Number(this.fieldData.value) < Number(this.fieldData
                  .item_type_attr.min)) {
                this.fieldData.value = Number(this.fieldData.item_type_attr
                  .min);
              }
            }
          }, 0);
        }
        this.getValid();
      },
      onInputfocus() {},
      onInputBlur() {
        this.$emit('on-value-blur', this.fieldData);
      },
      getValid: function() {
        let self = this
        debugger
        if (self.fieldData.isRequire && self.fieldData.value) {
          if (self.fieldData.hasOwnProperty('_validators') && self.fieldData._validators
            .hasOwnProperty(
              'isType') && typeof self
            .fieldData._validators.isType === 'function') {
            self.fieldData.valid = self.fieldData._validators.isType(self.fieldData.value);
            self.valid.valid = true;
          } else {
            self.fieldData.valid = {
              valid: true,
              msg: '有效'
            };
            self.valid.valid = true;
          }
        } else if (self.fieldData.isRequire && (self.fieldData.value === '' || self.fieldData
            .value === null ||
            self.fieldData
            .value === undefined)) {
          self.fieldData.valid = {
            valid: false,
            msg: self.fieldData.label + '不能为空'
          };
          self.valid.valid = false;
        } else {
          self.fieldData.valid = {
            valid: true,
            msg: '有效'
          };
          self.valid.valid = true;
        }
        if (self.fieldData._validators && self.fieldData._validators.js_validate) {
          let data = self.fieldsModel
          let result = eval("var fun=" + self.fieldData._validators.js_validate +
            "(data); fun")
          if (result !== true && result) {
            if (typeof result === 'object' && result.value) {
              self.fieldData.valid = {
                valid: true,
                msg: '有效',
                info: result.value
              }
            } else if (typeof result === 'string') {
              self.fieldData.valid = {
                valid: false,
                msg: result
              }
            }
          } else {
            self.fieldData.valid = {
              valid: true,
              msg: '有效'
            }
          }
        }
        self.valid = self.fieldData.valid
        console.log('getValid', self.fieldData);
        self.$emit('on-value-change', self.fieldData);
        return self.valid;
      },
      toggleTab(str) {
        console.log('点击', str);
        this.$refs[str].show();
        console.log(this.$refs[str].show());
      },
      onConfirm(val) {
        console.log(val);
        //如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
        // switch(this.mode){
        // 	case "date":
        // 		break;
        // }
        // this.fieldData.value={...val};
        this.fieldData.value = val.result;
        this.onInputBlur();
        this.$emit('on-form-item', this.fieldData);
        this.$emit('on-value-change', this.fieldData);
      },
      changePopup(e) {
        this.$emit('on-form-item', this.fieldData);
      },
      openCascader() {
        this.defaultLineVal = this.fieldData.value;
        this.$refs.popup.open();
      },
      async getUserRoomPerson(no) {
        const url = this.getServiceUrl('zhxq', 'srvzhxq_syrk_select', 'select');
        let req = {
          serviceName: 'srvzhxq_syrk_select',
          colNames: ['*'],
          condition: [{
              colName: 'fwbm',
              ruleType: 'eq',
              value: no
            },
            {
              colName: 'status',
              ruleType: 'eq',
              value: '有效'
            }
          ]
        };
        const res = await this.$http.post(url, req);
        return res.data.data;
        // console.log("-------------房屋---------",res)
      },
      openTreeSelector() {
        let self = this;
        if (this.field.disabled === true) {
          return;
        }
        self.getTreeSelectorData().then(_ => {
          if (self.fieldData.disabled !== true) {
            if (self.treeSelectorData.length > 0) {
              self.showTreeSelector = true;
            } else {
              uni.showToast({
                title: '暂无数据',
                icon: 'none'
              });
            }
          }
        });
      },
      getCascaderValue(val, btnType) {
        console.log(val);
        if (btnType === 'sure') {
          this.$refs.popup.close();
          if (val) {
            val['column'] = this.fieldData.column;
            this.$emit('get-cascader-val', val);
            if (this.fieldData.srvInfo.column) {
              this.fieldData.value = val[this.fieldData.srvInfo.column];
            } else {
              this.fieldData.value = val.path_name;
            }
          } else {
            this.$emit('get-cascader-val');
          }
        }
      },
      multiChange(e) {
        // [{"type":"user","value":"01000002","disp":"康信2/01000002"},{"type":"user","value":"admin","disp":"系统管理员/admin"}]
        if (Array.isArray(e.data)) {
          this.multiSelectData = e.data;
          if (e.data.length > 0 && this.fieldData.option_list_v2.refed_col) {
            if (e.data[0].hasOwnProperty(
                `_${this.fieldData.option_list_v2.refed_col}_disp`)) {
              this.multiSelectValue = e.data.map(item => item[
                `_${this.fieldData.option_list_v2.refed_col}_disp`])
            } else {
              this.multiSelectValue = e.data.map(item =>
                `${item[this.fieldData.option_list_v2.key_disp_col]}`)
            }
          }
        }
      },
      confirmTreeSelector(e) {
        this.treeSelectorShowValue = this.multiSelectValue
        const fieldData = this.fieldData
        let val = this.multiSelectData.map(item => {
          return {
            "type": "user",
            "value": item[fieldData.option_list_v2.refed_col],
            "disp": item[fieldData.option_list_v2.key_disp_col]
          }
        })
        try {
          this.fieldData.value = JSON.stringify(val)
        } catch (e) {
          //TODO handle the exception
        }
        this.showTreeSelector = false;
        this.onInputBlur();
        this.$emit('on-value-change', this.fieldData);
        this.getValid();
      },
      onMenu(e) {
        const data = e.item ? e.item : {};
        this.fieldData.value = this.fieldData.option_list_v2 && this.fieldData
          .option_list_v2['refed_col'] ? data[
            this.fieldData
            .option_list_v2['refed_col']] : data.no;
        this.fieldData['colData'] = data;
        this.showTreeSelector = false;
        this.onInputBlur();
        this.$emit('on-value-change', this.fieldData);
        this.getValid();
        let fieldData = this.fieldData;
        if (fieldData.type === 'treeSelector') {
          if (fieldData.colData && fieldData.value) {
            this.treeSelectorShowValue = fieldData.colData[fieldData.option_list_v2
              .key_disp_col];
          } else if (!fieldData.colData || !fieldData.value) {
            this.treeSelectorShowValue = fieldData.value;
          }
          this.fieldData.valueForDisplay = this.treeSelectorShowValue
        }
      },

      hideTreeSelector() {
        this.showTreeSelector = false
        if (this.fieldData.colData && this.fieldData.colData[this.fieldData.option_list_v2
            .refed_col]) {
          if (this.fieldData.colData[this.fieldData.option_list_v2.refed_col] !== this
            .fieldData.value) {
            delete this.fieldData.colData
            this.treeSelectorShowValue = this.fieldData.valueForDisplay ? this
              .fieldData.valueForDisplay : this
              .fieldData.value
          }
        }
      },
      onTreeGridChange(e) {
        console.log('onTreeGridChange', e);
      },
      getTreeSelectorDataWithKey() {
        if (this.treeSearchVal) {
          let option = this.fieldData.option_list_v2;
          let relation_condition = {
            relation: 'OR',
            data: []
          };
          if (!option.key_disp_col && !option.refed_col) {
            return;
          }
          if (option.key_disp_col) {
            relation_condition.data.push({
              relation: 'AND',
              data: [{
                colName: option.key_disp_col,
                value: this.treeSearchVal,
                ruleType: '[like]'
              }]
            });
          }
          if (option.refed_col) {
            relation_condition.data.push({
              relation: 'AND',
              data: [{
                colName: option.refed_col,
                value: this.treeSearchVal,
                ruleType: '[like]'
              }]
            });
          }
          this.getTreeSelectorData(null, null, relation_condition);
        }
      },
      isChecked(e) {
        if (this.fieldData && Array.isArray(this.fieldData.value) && this.fieldData.value
          .includes(e)) {
          return true;
        } else {
          return false;
        }
      },
      loadMoreTreeData() {
        if (this.treePageInfo.total > this.treePageInfo.pageNo * this.treePageInfo
          .rownumber) {
          this.treeDataStatus = 'loading';
          this.treePageInfo.pageNo++;
          this.getTreeSelectorData();
        } else {
          this.treeDataStatus = 'nomore';
        }
      },
      async getTreeSelectorData(cond, serv, relation_condition) {
        let self = this;
        let req = {
          // 封装 req
          serviceName: serv ? serv : self.fieldData.option_list_v2 ? self
            .fieldData.option_list_v2
            .serviceName : '',
          colNames: ['*'],
          page: {
            pageNo: this.treePageInfo.pageNo,
            rownumber: this.treePageInfo.rownumber
          }
        };
        let appName = ''; // 处理app no
        if (self.fieldData.option_list_v2 && self.fieldData.option_list_v2.srv_app) {
          appName = self.fieldData.option_list_v2.srv_app;
        } else {
          appName = this.appno || uni.getStorageSync('activeApp');
        }
        let fieldModelsData = self.deepClone(self.fieldsModel);
        let mainData = self.mainData
        if (!self.procData.id) {
          fieldModelsData = self.deepClone(self.fieldsModel);
        } else {
          fieldModelsData = self.deepClone(self.procData);
        }
        // #ifdef H5
        top.user = uni.getStorageSync('login_user_info');
        // #endif
        //debugger
        if (cond) {
          req.condition = cond;
        } else if (
          self.fieldData.option_list_v2 &&
          self.fieldData.option_list_v2.conditions &&
          Array.isArray(self.fieldData.option_list_v2.conditions) &&
          self.fieldData.option_list_v2.conditions.length > 0
        ) {
          let condition = self.deepClone(self.fieldData.option_list_v2.conditions);
          condition = condition.map(item => {
            if (!item.value) {
              if (item.valueExpr) {
                if (item.valueExpr.lastIndexOf("'") !== -1) {
                  item.value = item.valueExpr.replace(/\'/gi, '')
                }
              }
              return item
            }
            if (item.value.indexOf('data.') !== -1) {
              let colName = item.value.slice(item.value.indexOf(
                'data.') + 5);
              if (fieldModelsData[colName]) {
                item.value = fieldModelsData[colName];
              } else if (mainData && mainData[colName]) {
                item.value = mainData[colName];
              } else {
                item.value = '';
              }
            } else if (item.value.indexOf('mainData.') !== -1) {
              let colName = item.value.slice(item.value.indexOf(
                'mainData.') + 9);
              if (mainData && mainData[colName]) {
                item.value = mainData[colName];
              } else {
                item.value = '';
              }
            } else if (item.value.indexOf('top.user.user_no') !== -1) {
              item.value = uni.getStorageSync('login_user_info').user_no;
            } else if (item.value.indexOf("'") === 0 && item.value
              .lastIndexOf("'") === item.value
              .length - 1) {
              item.value = item.value.replace(/\'/gi, '');
            }
            if (item.value_exp) {
              delete item.value_exp;
            }
            return item;
          }).filter(item => {
            if (item.ruleType === 'eq' && !item.value) {
              return false
            } else {
              return true
            }
          })
          if (Array.isArray(condition) && condition[0]) {
            req.condition = condition;
          } else {
            // return;
          }
        } else if (self.fieldData.option_list_v2 && self.fieldData.value) {
          // let condition = [{
          // 	colName: self.fieldData.option_list_v2.refed_col,
          // 	ruleType: "eq",
          // 	value: self.field.value
          // }]
          // req.condition = condition;
        }
        if (relation_condition && typeof relation_condition === 'object') {
          req.relation_condition = relation_condition;
        }
        if (req.serviceName === 'srvsso_user_select') {
          // req.condition = [{ colName: 'user_disp', ruleType: 'like', value: 'bx100sys' }];
          req.condition = [{
            colName: 'user_disp',
            ruleType: 'like',
            value: ''
          }];
          appName = 'sso';
        }
        if (req.serviceName === 'srvsys_service_columnex_v2_select') {
          let condServ = '';
          req.condition.forEach(item => {
            if (item.colName === 'service_name') {
              condServ = item.value;
            }
          });
          if (!condServ) {
            return;
          }
        }
        if (req.serviceName === 'srvstore_member_mgmt_select'&&(!req.condition||req.condition.length==0)) {
          let store = sessionStorage.getItem("storeNo")
          req.condition = [{
            colName: 'store_no',
            ruleType: 'like',
            value: store
          }];
          appName = 'fyzhmd';
        }


        if (!req.serviceName) {
          return
        }
        if (this.pageFormType === 'detail' && this.fieldData.value) {
          req.condition = [{
            colName: this.fieldData?.option_list_v2?.refed_col,
            ruleType: 'eq',
            value: this.fieldData.value
          }]
        }
        let res = await self.onRequest('select', req.serviceName, req, appName);
        if (res.data.state === 'SUCCESS' && res.data.page && res.data.page.total > res
          .data.page.rownumber *
          res.data.page
          .pageNo) {
          this.treeDataStatus = 'loadmore';
        } else {
          this.treeDataStatus = 'nomore';
        }
        if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
          if (res.data.page) {
            this.treePageInfo = res.data.page;
          }
          let hasParentNo = res.data.data.filter(item => item.parent_no).length;
          if (hasParentNo && self.pageFormType !== 'detail' & self.fieldData
            .option_list_v2 && self.fieldData
            .option_list_v2.is_tree) {
            let idCol = 'no'
            if (self.fieldData.option_list_v2 && self.fieldData.option_list_v2
              .refed_col) {
              idCol = self.fieldData.option_list_v2.refed_col
            }
            self.treeSelectorData = self.treeReform(res.data.data, 'parent_no',
              idCol);
            if (res.data.page && res.data.page.pageNo > 1) {
              let data = self.treeReform(res.data.data, 'parent_no', idCol);
              self.treeSelectorData = [...self.treeSelectorData, ...data];
            }
            self.treeSelectorData = self.treeSelectorData.map((item, index) => {
              let a = {
                title: '',
                name: '',
                icon: '',
                seq: '',
                link: '',
                type: 'button',
                _childNode: []
              };
              a.title = item.pr_name;
              a.name = item.pr_name;
              a._childNode = item._childNode;
              a.no = item.no;
              a.parent_no = item.parent_no;
              a = Object.assign(a, item);
              return a;
            });
          } else {
            if (res.data.page && res.data.page.pageNo > 1) {
              let data = res.data.data;
              self.treeSelectorData = [...self.treeSelectorData, ...data];
            } else {
              self.treeSelectorData = res.data.data;
            }
          }
          self.treeSelectorData.forEach(item => {
            if (self.fieldData.option_list_v2 && self.fieldData
              .option_list_v2.refed_col && item[
                self.fieldData.option_list_v2
                .refed_col] === self.fieldData.value) {
              self.fieldData['colData'] = item;
              self.$set(self.fieldData, 'colData', item)
            }
          });
        } else if (res.data.state === 'SUCCESS' && res.data.data.length === 0) {
          self.treeSelectorData = []
        } else if (req.serviceName === 'srvsys_service_columnex_v2_select' && res
          .data && res.data.data &&
          Array.isArray(
            res.data.data.srv_cols)) {
          self.treeSelectorData = res.data.data.srv_cols;
        }
      }
    },
    watch: {
      field: {
        handler: function(newValue, oldValue) {
          if (newValue.value === null) {
            newValue.value = '';
          }
          this.fieldData = newValue;
          // console.log(this.fieldData)
        },
        immediate: true,
        deep: true
      },
      fieldData: {
        handler: function(newValue, oldValue) {
          if (newValue.type === 'number' && parseInt(newValue.value).toString() !== 'NaN') {

            newValue.value = parseInt(newValue.value);
          }
          // this.getValid();
          // this.getDefVal();
        },
        // immediate:true,
        deep: true
      },
      // fieldsModel: {
      //   handler: function(newValue, oldValue) {
      //     console.log('fieldsModel--------', newValue);
      //     // this.modelData = JSON.parse(JSON.stringify(newValue))
      //     // console.log('this.modelData........', this.modelData);
      //     //    if(self.fieldData.type === "list"){
      //     //  let listItemModel =  self.fieldData.optionsConfig.model
      //     //  let colKey = self.fieldData.optionsConfig.conditions
      //     //  for(let i = 0;i<colKey.length;i++){
      //     // 	 listItemModel[colKey[i].colName] = newValue[colKey[i].value]
      //     //  }
      //     //  self.listChildModel = listItemModel
      //     // }
      //   },
      //   deep: true
      // }
    }
  };
</script>

<style lang="scss" scoped>
  .itemwrap {
    flex-wrap: wrap;
    &.disabled-field{
      cursor: not-allowed;
      opacity: 0.7;
    }
    input{
      font-size: 14px;
    }
    .title {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex-wrap: wrap;
      min-width: 25%;

      text {
        max-width: 100%;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        white-space: break-spaces;
        text-align: left;

      }
    }

    .form-content {
      // flex: 1;
      min-width: 60%;
      // text-align: right;
      text-align: left;
    }
  }

  .input-sm {
    height: 2.4em;
    line-height: 2.4em;
    min-height: 2.4em;
  }

  .content {
    text-align: left;
    // height: 400upx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .cu-modal {
    z-index: 9999;
  }

  .checkbox-group {
    display: flex;
    flex-wrap: wrap;

    .checkbox {
      padding: 10rpx 0;
      min-width: 30%;
      padding-right: 50rpx;

      &.wrap-row {
        width: 100%;
      }

      .text {
        margin-left: 20rpx;
      }
    }
  }

  .form-content {
    // width: 100%;

    radio-group {
      width: 100%;
    }

    /deep/.u-radio__label {
      max-width: 700rpx;
    }

    .u-radio {
      max-width: 700rpx;
    }

    .radio {
      width: 50% !important;
      min-width: calc(33% - 40rpx);
      // margin-right: 20rpx;
      margin-bottom: 10rpx;
      transform: scale(0.7);

      .radio-label {
        margin-left: 20rpx;
        transform: scale(1.3);
        margin: 0 20rpx;
      }

      &.has-img {
        width: 100%;

        ::v-deep .uni-radio-wrapper {
          width: 100%;
          align-items: flex-start;
        }

        .radio-content {
          flex: 1;
        }
      }

      label {
        line-height: 70rpx;
      }

      .radio-content {
        display: flex;
        flex-direction: column;
      }
    }

    & /deep/ .uni-radio-input-checked {
      background-color: red;
    }

    .checkbox {
      width: 100%;

      .blue {
        transform: scale(0.9);
      }

      .text {
        font-size: 25rpx;
      }
    }
  }


  /* #ifdef MP-WEIXIN */
  .form-content {
    flex: 1;
    font-size: 14px;
    color: #555;
    box-sizing: border-box;
    padding: 5px;
    text-indent: 0;
    background: transparent;
    border: 1rpx solid #e6ebe9;
    resize: none;
    border-radius: 2px;
    outline: none;
    line-height: normal;
    padding: 10rpx;

    &.alo_radio {
      border: none;
    }

    &.valid_error {
      border: 1rpx solid #ff0000;
    }
  }

  /* #endif */
  .option_img_explain {
    margin: 10rpx 0 5rpx;
    color: #666;
  }

  uni-text.input-icon {
    position: relative;
    font-size: 42upx;
    right: 60upx;
  }

  .tab {
    padding: 20upx 0;
    font-size: 32upx;
  }

  .tab.active {
    color: #f00;
  }

  .result {
    margin-top: 100upx;
    font-size: 32upx;
  }

  .input-button {
    width: 40%;
    margin-left: 20upx;
    display: inline-block;
    height: 100%;
    padding: 10upx;
    font-size: 32upx;
    line-height: 64upx;
  }

  .item_type_attr {
    width: 100%;
  }

  .cu-list.card-menu {
    padding: 0;
    margin: 0;

    .cu-item {
      display: flex;
      padding: 0;
      margin: 0;
      justify-content: space-between;

      .content {
        flex: 1;
        max-width: 60%;
      }

      .buttons {
        // flex: 1;
        display: flex;
        justify-content: space-between;

        .cu-btn {
          &:first-child {
            margin-right: 10upx;
          }
        }
      }
    }
  }

  .cu-form-group {
    padding: 10rpx 30rpx;

    .u-image {
      margin-bottom: 10rpx;
    }
  }

  .cu-form-group .title {
    display: flex;
    align-items: flex-end;
    height: auto;
    margin: 20rpx 0 0upx;
    color: #333;
    line-height: 60rpx;
    flex-wrap: wrap;

    .info {
      width: 100%;
      font-size: 12px;
    }

    &.valid_error {
      color: #ff0000;
    }
  }

  .cu-avatar {
    border: none !important;
  }

  .cu-form-group.form-detail {
    display: flex;
    // flex-direction: row;
    border-bottom: 1px dashed #efefef;
    min-height: 50px;
    flex-wrap: wrap;

    .title {
      flex: 1;
      opacity: 0.5;
      white-space: nowrap;
      font-size: 20px;
    }

    .detail-text {
      flex: 2;
      height: auto;
      margin: 10px 0 0px;
      line-height: 60rpx;
      overflow: scroll;

      &.row-wrap {
        flex: auto;
        width: 100%;
      }
    }
  }

  .cu-card.article>.cu-item .title {
    line-height: normal;
  }

  .cu-dialog.tree-selector,
  .cu-dialog.rich-text {
    height: auto;
    padding-top: 50rpx;
    background-color: #fff;
    z-index: 199;
    position: fixed;
    bottom: 0;

    .dialog-button {
      display: flex;
      justify-content: center;
      // height: 100upx;
      align-items: center;
      // padding-right: 50upx;
      padding: 20rpx 0;
      margin-top: 50rpx;
    }
  }

  .pickers {
    padding-right: 0;
  }

  .cu-form-group picker::after {
    display: none !important;
  }

  .cu-form-group uni-picker::after {
    display: none !important;
  }

  .uni-popup {
    z-index: 10000;
  }

  // .u-radio__icon-wrap--disabled--checked{
  // 	.u-icon__icon{
  // 		// color: blue!important;
  // 	}
  // }
  .u-radio__icon-wrap--checked.u-radio__icon-wrap--disabled--checked {
    .u-icon__icon.uicon-checkbox-mark {
      color: rgb(100, 150, 197) !important;
    }
  }

  .u-radio__icon-wrap--disabled {
    background-color: #a2afc3;
    border-color: #c8c9cc !important;
  }

  .treeSelector-input {
    border: 1rpx solid #d0d4d6;
    padding: 10rpx;
    min-height: 2.8em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .user-item {
    background-color: #f1f1f1;
    padding: 2px 5px;
    border-radius: 5px;
    margin-bottom: 10rpx;
    text-align: center;
    margin-left: 10rpx;
  }

  .user-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
  }

  .text-black {
    font-weight: bold;
    color: #333333;
    white-space: nowrap;
    font-size: 14px;
    margin-right: 20upx;
  }
</style>
